<script setup>
import { useStorage } from "@vueuse/core";

const account = useStorage("account");
const member = useStorage("member");
</script>

<template>
    <header
        class="fixed top-0 left-0 z-50 w-full h-10 bg-iso-gray-600 border-b border-iso-gray-400"
    >
        <div class="w-full flex">
            <router-link
                class="w-40 h-10 leading-10 flex justify-center items-center"
                to="/"
            >
                <img class="object-cover h-6" src="/logo.png" alt="logo" />
            </router-link>
            <div class="flex-1 flex justify-between text-iso-gray-300 text-sm">
                <p class="leading-7 mt-3">AIGC赋能智造流程新范式</p>

                <template v-if="account !== undefined">
                    <p class="flex mr-10 leading-10">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            class="size-5 my-2.5"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
                            />
                        </svg>

                        <span class="mx-2">
                            {{ account }}
                        </span>

                        <template v-if="member !== undefined">
                            <span class="text-yellow-400 font-bold"> VIP </span>
                        </template>
                    </p>
                </template>
            </div>
        </div>
    </header>
</template>
